<div
  class="drawer"
  [attr.id]="id"
  [ngStyle]="{ 'z-index': zIndex }"
  [ngClass]="{ 'display-width': _isCover && animateState === 'in' }"
  [style.left]="position === 'left' ? 0 : null"
  [style.right]="position === 'right' ? 0 : null"
>
  <div
    class="overlay-wrapper"
    [ngClass]="{ 'display-width': _isCover && animateState === 'in' }"
    [style.left]="position === 'left' ? 0 : null"
    [style.right]="position === 'right' ? 0 : null"
  >
    <div
      class="overlay-backdrop"
      [ngClass]="{ 'display-width': _isCover && animateState === 'in' }"
      [@backdropAnimation]="animateState"
      [@.disabled]="!showAnimation"
      (click)="backdropCloseable && hide()"
    ></div>
    <div
      #drawerContainer
      class="drawer-nav"
      [ngStyle]="{ width: _width }"
      [@flyInOut]="position + '-' + animateState"
      (@flyInOut.done)="animationDone.next($event)"
      [@.disabled]="!showAnimation"
      [style.left]="position === 'left' ? 0 : null"
      [style.right]="position === 'right' ? _right : null"
    >
      <div class="drawer-content" cdkScrollable>
        <ng-template dDrawerContentHost></ng-template>
      </div>
      <div *ngIf="contentTemplate" class="drawer-content" cdkScrollable>
        <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
      </div>
      <div
        #resizeBar
        dResize
        class="devui-drawer-resize-bar"
        [ngClass]="{
          'devui-drawer-can-hover': resizable,
          'devui-drawer-resize-bar-left': position === 'left',
          'devui-drawer-resize-bar-right': position === 'right'
        }"
      ></div>
    </div>
  </div>
</div>
